<!-- 地图  绘制marks.  多边形图片 -->

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers"
					:polygons="polygons" :polyline="polyline" :enable-satellite="true">
					<cover-view style="width: 200rpx; height: 400rpx; background-color: aliceblue;">
						 <cover-view>点击我</cover-view>
						 <cover-view>点击我</cover-view>
						 <cover-view>点击我</cover-view>
						 <cover-view>点击我</cover-view>
						 <cover-view>点击我</cover-view>
					</cover-view>
				</map>
				
				
			
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 34.67913510873331,
				longitude: 113.85976584889124,
				// 指定一系列坐标点，从数组第一项连线至最后一项
				polyline: [{
					points: [{
							latitude: 34.6786,
							longitude: 113.8622
						},
						{
							latitude: 34.6775,
							longitude: 113.8527
						},
						{
							latitude: 34.6804,
							longitude: 113.8526
						}
					],
					color: "#ff0000",
					width: 2
				}],
				polygons: [{
					strokeWidth: 1,
					strokeColor: '#67c23a',
					fillColor: '#1791fc66',
					level: "false",
					points: [{
							latitude: 34.6786,
							longitude: 113.8612
						},
						{
							latitude: 34.6775,
							longitude: 113.8587
						},
						{
							latitude: 34.6804,
							longitude: 113.8576
						}
					]
				}, ],
				covers: [{
					id: 11,
					latitude: 34.67964528513828,
					longitude: 113.85971535739941,
					iconPath: '../../../static/point.png',
					width: 22,
					height: 22,
					title: "温度传感器",
					callout: {
						bgColor: "rgba(0, 85, 255, 0.8)",
						content: `温度传感器：36℃
							  湿度传感器：56%`,
						color: "#fff",
						borderWidth: 1,
						borderColor: "rgba(0, 85, 255, 0.8)",
						padding: 8,
						display: "ALWAYS"
					},
					label: {
						content: "设备一",
						color: "#fff"
					}
				}, {
					id: 222,
					latitude: 34.67732437579631,
					longitude: 113.86117552386861,
					iconPath: '../../../static/point.png',
					width: 22,
					height: 22,
					title: "湿度传感器"
				}]
			}
		},
		methods: {

		}
	}
</script>